<template>
  <div class="footer">
      <div class="links">
        <a href="#" style="font-size: 40px; font-family: LiSu; color: #cf2931"
          >几案家居设计网</a
        >
        <a href="#">关于我们</a>| <a href="#">联系我们</a>|
        <a href="#">联系客服</a>| <a href="#">隐藏条款</a>|
        <a href="#">使用条款</a>| <a href="#">缺陷披露政策</a>|
        <a href="#">English Site</a>|
        <a href="#">Contact U</a>
      </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.footer {
  background-color: rgba(255, 255, 255, 0.4); /* 修改透明度的背景色 */
  margin-top: 50px;
  padding: 20px 0;
  .links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #b7b7b7;
    a {
      text-decoration: none;
      font-size: 16px;
      color: #737373;
      margin: 10px;
      white-space: nowrap; /* 防止文本换行 */
    }
    .brand {
      font-size: 40px;
      font-family: LiSu;
      color: #cf2931;
      flex-basis: 100%; /* 在较小屏幕上占满一行 */
    }
  }
}

@media (max-width: 768px) {
  .footer {
    .links {
      flex-direction: column;
      a {
        margin: 5px 0;
      }
    }
  }
}
</style>